<template>
  <div class="head">
    <div class="head_left">
      <p>舒城县智慧旅游大平台</p>
      <img src="@/assets/images/newImg/head_left.png" alt="" />
    </div>
    <div class="head_center">
      <div
        v-for="(i, index) in navArr"
        :key="index"
        class="h_c_iten"
        :class="{ active: isIndex == index }"
      >
        <router-link :to="i.path">
          {{ i.name }}
        </router-link>
      </div>
    </div>
    <div class="head_right">
      <div class="h_r_left">
        <p class="time">{{ time }}</p>
        <p class="day">{{ day }}</p>
      </div>
      <div class="h_r_right">
        <img :src="loginUsrer.avatar" alt="" />
        <p>{{ loginUsrer.userName }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import goBack from "@/assets/screen/goBack.png";

export default {
  name: "",
  data() {
    return {
      isIndex: 0,
      timer: null,
      time: "",
      day: "",
      goBack,
      navArr: [
        {
          name: "综合态势",
          path: "/bigScreen",
        },
        {
          name: "安全监管",
          path: "/safetySupervision/videoMonitor",
        },
        {
          name: "公众服务",
          path: "/publicService/homepage",
        },
        {
          name: "信息管理",
          path: "/form/culture/list",
        },
        {
          name: "数据分析",
          path: "/dataAnalysis/dashboard",
        },
        {
          name: "视频监控",
          path: "/dataAnalysis/dashboard",
        },
      ],
      loginUsrer: {},

      activeIndex: 0,
    };
  },
  methods: {
    handleCommand() {},

    getTime() {
      this.time = moment().format("HH:mm:ss");
      this.day = moment().format("YYYY-MM-DD");
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      this.timer = setInterval(() => {
        this.getTime();
      }, 1000);
    },

    // 获取登录者名称
    getLoginUser() {
      console.log(this.$store.state.user.userInfo);
      return this.$store.state.user.userInfo;
    },
    async backWeb() {
      this.$store.dispatch("LogOut").then(() => {
        this.$router.replace("/login");
      });
    },
  },
  mounted() {
    this.getTime();
    this.loginUsrer = this.getLoginUser();
  },
  created() {
    this.flexible();
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

<style lang="scss" scoped>
@import "@/utils/px2vwvh.scss";

.active {
  background-image: url("~@/assets/images/newImg/nav.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 80%;
}
p {
  margin: 0;
  padding: 0;
}
.d_f_c {
  display: flex;
  align-items: center;
}

.head {
  width: 100%;
  height: 100%;

  font-size: 1.5rem;
  color: #ffffff;
  background-image: url("~@/assets/images/newImg/head_bg.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-size: 100% 100%;
  display: flex;
  align-content: center;

  .head_left {
    flex: 1.8;
    height: 100%;
    font-family: "youshebiaotihei";
    @include px2font(40);
    display: flex;
    align-items: center;
    position: relative;
    p {
      @include px2vw(padding-left, 32);
      position: absolute;
      z-index: 10;
    }
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 50%;
      z-index: 0;
    }
  }
  .head_center {
    flex: 3;
    height: 100%;
    display: flex;
    align-items: center;
    .h_c_iten {
      @include px2font(24);
      @include px2vw(width, 140);
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-mask: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.3),
        rgba(173, 226, 251, 0.8)
      );
    }
  }
  .head_right {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 1% 0;
    @include px2vw(padding-right, 32);
    .h_r_left {
      padding: 0 3%;
      border-right: 1px solid #fff;
      .time {
        @include px2font(16);
      }
      .day {
        @include px2font(12);
      }
    }
    .h_r_right {
      padding: 0 3%;
      display: flex;
      @include px2font(14);
      img {
        @include px2vw(margin-right, 4);
        @include px2vw(width, 24);
        @include px2vw(height, 24);
        border-radius: 50%;
      }
    }
  }

  // .time {
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  // }
  // .time,
  // .time2 {
  //   height: 100%;
  //   font-family: Arial, Helvetica, sans-serif;
  //   font-size: 1.2rem;
  //   display: flex;
  //   .time_p {
  //     font-size: 1.8rem;
  //   }
  // }
  // .time2 {
  //   position: absolute !important;
  //   top: 0 !important;
  //   right: 0 !important;
  // }
  // .head_left {
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  // }
  // .head_left,
  // .head_right {
  //   @include px2vh(height, 40);
  //   overflow: hidden;
  //   .left_nav {
  //     width: 100%;
  //     height: 100%;
  //     div {
  //       cursor: pointer;
  //       height: 100%;
  //       @include px2vw(width, 132);
  //       @include px2vw(margin-right, 18);
  //       background-image: url("~@/assets/images/bigScreen/NewHead/item_bg.png");
  //       background-size: 100% 100%;
  //       text-align: center;
  //       justify-content: center;
  //       P {
  //         font-size: 1.8rem;
  //       }
  //     }
  //   }
  // }

  // .head_right {
  //   position: absolute;
  //   bottom: 0;
  //   right: 0;

  //   .time {
  //     height: 100%;
  //     width: 14%;
  //     margin-right: 0;
  //     justify-content: right;
  //     cursor: pointer;
  //   }
  // }
}
</style>
